import { Button, Modal, Form, Input, Switch} from 'antd';
import React, { useEffect, useState,useRef } from 'react';
import '../css/Authority.less'
import { Checkbox, Col, Row } from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import { AddUpdataRoles } from "../../../../api/authority"
interface DataType {
    key: React.Key;
    id: Number;
    RoleName: string;
    FunctionalDescription: string;
    member: Number;
    CreationTime: string;
    isGo: Number;
}
interface menuType {
    menuId: number,
    des: string,
    menuName: string,
    menuRemark: string,
    menuUrl: null,
    pid: number,
    icon: null
}
interface PropsType {
    isEdit: boolean;
    closeEdit(): void;
    editValue: DataType | null
    menuList:menuType[]
    showRoles(): void
}
function EditAuthority(props: PropsType) {
    const formRef = useRef(null);
    const [form] = Form.useForm();
    useEffect(() => {
        console.log(props.editValue);
        form.setFieldsValue({
            roleId:props.editValue?.id,
            roleName:props.editValue?.RoleName,
            roleJob:props.editValue?.FunctionalDescription,
            enable:props.editValue?.isGo == 1 ? true : false,
        })
    }, [props])
    // 3、点击取消
    const cancel = () => {
        props.closeEdit()

    }

    // 表单布局
    const layout = {
        labelCol: {
            span: 8,
        },
        wrapperCol: {
            span: 16,
        },
    };
    // 表单验证
    const validateMessages = {
        required: '${label}必填',
        types: {
            number: '${label}必须是数值',
        },
        number: {
            range: '${label}  ${min} 到 ${max} 位',
        },
    };
    const onFinish = (values: any) => {
        props.closeEdit()
        console.log('Success:', values);
        
        AddUpdataRoles({ roleId:values.roleId,menuIds: values.menu, roleJob: values.roleJob, roleName: values.roleName}).then(res => {
            console.log('所有信息', res);
            props.showRoles()
        }).catch(err => {
            console.log('所有信息', err);
        })
    }
    //多选框变化
    const onChangeCheck = (checkedValues: CheckboxValueType[]) => {
        console.log('checked = ', checkedValues);

    }
    // 只需要保证同一次遍历中 key 不同。 listItems 和 sideBy 属于不同的遍历，可以用相同的key
    const listItem = props.menuList.map(function (item) {
        if (item.pid == 0) {
            return <Col span={8} key={item.menuId}>
                <Checkbox  value={item.menuId}>{item.menuRemark}</Checkbox></Col>
        }
    })
    return (

        <Modal centered={true} title="添加角色" open={props.isEdit} footer={null} onCancel={cancel} forceRender>
            <Form
                name="basic"
                form={form}
                ref={formRef}
                {...layout}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                autoComplete="off"
            >
                <Form.Item
                    label="角色序号"
                    name="roleId"
                    initialValue={props.editValue ? props.editValue.id : ''}
                    rules={[{ required: true }]}
                >
                    <Input disabled/>
                </Form.Item>
                <Form.Item
                    label="角色名称"
                    name="roleName"
                    initialValue={props.editValue ? props.editValue.RoleName : ''}
                    rules={[{ required: true }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="职能描述"
                    name="roleJob"
                    initialValue={props.editValue ? props.editValue.FunctionalDescription : ''}
                    rules={[{ required: true }]}
                >
                    <Input.TextArea />
                </Form.Item>
                <Form.Item

                        label="权限"
                        name="menu"
                    >
                        <Checkbox.Group style={{ width: '100%' }} onChange={onChangeCheck}>
                            <Row>
                                {listItem}
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>
                <Form.Item
                    wrapperCol={{
                        ...layout.wrapperCol,
                        offset: 8,
                    }}
                >
                    <Button type="primary" htmlType="submit" className='yes'>确定</Button>
                    <Button type="primary" onClick={cancel} ghost>取消</Button>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default EditAuthority;